{extend name="index/layout" /}

{block name="canonical"}
<link rel="canonical" href="{$canonical}">
{/block}

{block name="content"}

    <!-- 面包屑导航 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-6">
        <div class="flex items-center text-sm">
            <a href="/" class="text-primary hover:text-accent">首頁</a>
            <i class="fas fa-chevron-right mx-2 text-gray-400"></i>
            <span class="text-gray-600 truncate">{$name_label}{$sel_type_label}</span>
        </div>
    </div>

    <!-- 分类标题 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h1 class="text-3xl font-bold text-primary mb-2">{$name_label}{$sel_type_label}</h1>
        <p class="text-gray-600">瀏覽並下載高清{$name_label}桌布，讓您的{$sel_type_label}煥然一新</p>
        {if condition="$last_update_time"}
        <div class="flex justify-between items-center mt-2 mb-2">
            <div class="text-sm text-gray-500 inline-flex items-center">
                <i class="far fa-clock mr-1"></i> 最後更新：<span class="text-primary ml-1">{$last_update_time}</span>
            </div>
        </div>
        {/if}
        <!-- 类型过滤 -->
        <div class="flex items-center mt-4 space-x-4">
            {if condition="$is_dynamic == false"}
            <a href="/{$name}/<?php echo rawurlencode('電腦桌布')?>/" class="inline-flex items-center px-3 py-1 rounded-full {eq name='type' value='電腦桌布'}bg-primary text-white{else/}bg-gray-200 text-gray-700 hover:bg-gray-300{/eq}">
                <i class="fas fa-desktop mr-2"></i> 電腦桌布
            </a>
            <a href="/{$name}/<?php echo rawurlencode('手機桌布')?>/" class="inline-flex items-center px-3 py-1 rounded-full {eq name='type' value='手機桌布'}bg-accent text-white{else/}bg-gray-200 text-gray-700 hover:bg-gray-300{/eq}">
                <i class="fas fa-mobile-alt mr-2"></i> 手機桌布
            </a>
            {else /}
            <a href="/{$name}/<?php echo rawurlencode('動態電腦桌布')?>/" class="inline-flex items-center px-3 py-1 rounded-full {eq name='type' value='動態電腦桌布'}bg-primary text-white{else/}bg-gray-200 text-gray-700 hover:bg-gray-300{/eq}">
                <i class="fas fa-desktop mr-2"></i> 動態電腦桌布
            </a>
            <a href="/{$name}/<?php echo rawurlencode('動態手機桌布')?>/" class="inline-flex items-center px-3 py-1 rounded-full {eq name='type' value='動態手機桌布'}bg-accent text-white{else/}bg-gray-200 text-gray-700 hover:bg-gray-300{/eq}">
                <i class="fas fa-mobile-alt mr-2"></i> 動態手機桌布
            </a>
            {/if}
        </div>
    </div>
    
    <!-- 壁纸列表 -->
    {if condition="!empty($wallpapers)"}
    <div class="{eq name='type' value='手機桌布'}grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4{else/}grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6{/eq} mb-8">
        {volist name="wallpapers" id="wallpaper"}
        <div class="bg-white rounded-lg shadow-md overflow-hidden hover-card">
            <a href="/category/{$wallpaper.type_name|rawurlencode}/{$wallpaper.category_name|rawurlencode}/{$wallpaper.title|rawurlencode}">
                <div class="relative {eq name='wallpaper.type' value='desktop'}desktop-card{else/}mobile-card{/eq} bg-gray-200">
                    <img src="{$wallpaper.show_file_path}" alt="{$wallpaper.title}" class="w-full h-full object-cover lazy" loading="lazy">
                    <div class="absolute top-0 right-0 bg-secondary text-white px-2 py-1 text-xs rounded-tl-md">
                        <a href="/category/{$wallpaper.type_name|rawurlencode}/{$wallpaper.category_name|rawurlencode}">{$wallpaper.category_name}</a>
                    </div>
                    {if condition="$wallpaper.is_dynamic"}
                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
                        <div class="bg-black bg-opacity-50 rounded-full w-12 h-12 flex items-center justify-center">
                            <i class="fas fa-play text-white text-xl"></i>
                        </div>
                    </div>
                    {/if}
                    <div class="absolute bottom-0 left-0 bg-primary bg-opacity-80 text-white px-3 py-1 text-sm">
                        <i class="fas fa-eye mr-1"></i> {$wallpaper.view_cnt}
                        <i class="fas fa-download ml-3 mr-1"></i> {$wallpaper.download_cnt}
                    </div>
                </div>
                <div class="p-{eq name='wallpaper.type' value='desktop'}4{else/}3{/eq}">
                    <h3 class="text-{eq name='wallpaper.type' value='desktop'}lg{else/}sm{/eq} font-bold mb-{eq name='wallpaper.type' value='desktop'}2{else/}1{/eq} text-primary truncate">{$wallpaper.title}</h3>
                </div>
            </a>
        </div>
        {/volist}
    </div>
    
    <!-- 分页 -->
    <div>
        {$page}
    </div>
    {else /}
    <div class="bg-white rounded-lg shadow-md p-12 text-center">
        <i class="fas fa-image text-6xl empty-state-icon mb-4"></i>
        <h3 class="text-xl font-bold text-gray-700 mb-2">暫無桌布</h3>
        <p class="text-gray-500">該分類下暫時沒有{eq name='type' value='desktop'}電腦{else if condition="$type eq 'mobile'"}手機{/eq}桌布</p>
        <a href="{:url('index/index')}" class="inline-block mt-6 bg-primary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded">
            返回首頁
        </a>
    </div>
    {/if}
{/block} 